<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <head th:include="admin/template :: header" />
  <body class="main-body">
        <div class="container main-containern">
            <div th:substituteby="staff/template :: nav" />   
            <a th:href="@{/staff/management/catalog/add}" class="btn btn-primary float_right margin_button_bottom">Thêm loại bài mới</a>
            <div class="clearfix"></div>
            <table id="table" style="table-layout: fixed; word-wrap: break-word;">
                <thead>
                    <tr>
                        <th>Tên loại bài viết</th>
                        <th>Thông tin</th>
                        <th>Số bài đăng</th>
                        <th>Thao tác</th>
                    </tr>
                </thead>
                <tbody>
                    <tr th:id="${catalog.id}" align="center" th:each="catalog: ${catalogs}">
                        <td  id="catalogName">
                            <a th:text="${catalog.name}" th:href="@{/staff/management/catalog/}+${catalog.id}"/>
                        </td>
                        <td th:text="${catalog.info}" id="catalogInfo"/>                        
                        <td th:text="${catalog.counter}" id="catalogCounter"/>
                        <td>
                            <a th:href="@{'/staff/management/catalog/update/'+${catalog.id}}" title="SỬa"><i class="glyphicon glyphicon-pencil"></i></a>
                            <a th:href="@{'/staff/management/catalog/delete/'+${catalog.id}}" title="Xóa"><i class="glyphicon glyphicon-remove-circle"></i></a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div th:include="staff/template :: footer"></div>
        </div>	
        <script th:inline="javascript">
            /*<![CDATA[*/
            jQuery(document).ready(function() {
                jQuery("#table").dataTable({"bJQueryUI": true});
                COMMON.activeMenu("nav_website");
            });
            /*]]>*/
        </script>    
    </body>
</html>